<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--潘天赐-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-treeview.min.css"
          th:href="@{static/js/bootstrap/css/bootstrap-treeview.min.css}"
    >
    <script src="static/js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.addtabs.css">
    <script src="static/js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="static//js/bootstrap/css/bootstrap-table.min.css">
    <script src="static/js/bootstrap/js/bootstrap-table.min.js"></script>
    <script src="static/js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/js/bootstrap/js/bootbox.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="static/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="static/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="static/js/bootstrap-fileinput/css/fileinput.css">

</head>
<body>
<input type="hidden" th:value="${queryPictureId}" id="queryPictureId" name="queryPictureId" class="form-control">
<input type="hidden" th:value="${commonQueryId}" id="commonQueryId" name="commonQueryId" class="form-control">
<form id="myForm">
    <table class="table">
        <tr>
            <th>类目</th>
            <th>材料名称</th>
            <th>材料数量</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>
                <!--<input type="text" name="materialsType" id="materialsType" class="form-control" style="width:150px;">-->
                <input type="hidden" name="materialsInventoryId" id="materialsInventoryId" class="form-control" style="width:150px;">
                <select class="selectpicker form-control" id="materialsType" name="materialsType" style="width:150px;">
                    <option value="-1">请选择</option>
                </select>
            </td>
            <td><input type="text" name="materialsName" id="materialsName" class="form-control" style="width:150px;"></td>
            <td>
                <input type="text" name="materialsCount" id="materialsCount" onkeyup="yz_count()" placeholder="请输入正整数" class="form-control" style="width:150px;">
                <span style="color: #ff0000" id="span_count"></span>
            </td>
            <td><button type="button" onclick="deleteFile()" class="btn btn-link">删除</button></td>
        </tr>
    </table>
</form>
<br>
<button type="button" onclick="updatePictureMaterials()" class="btn btn-primary">确认提交</button>
</body>
<script>
$(function (){
    echo();
})
function echo() {
    var id = $("#queryPictureId").val();
    $.ajax({
        url: "queryPictureMaterials",
        type: "post",
        data: {id: id},
        success: function (data) {
            $("#materialsInventoryId").val(data.materialsInventoryId);
            $("#materialsType").val(data.materialsType);
            $("#materialsName").val(data.materialsName);
            $("#materialsId").val(data.materialsId);
            $("#materialsCount").val(data.materialsCount);
        }
    });
}
//下拉框
$.ajax({
    url:"queryMaterialsType",  //查询类型表
    success:function(data){
        for (var i = 0; i < data.length; i++) {
            $("#materialsType").append("<option value='"+data[i].materialsTypeId+"'>"+ data[i].materialsTypeName +"</option>");
        }
        $('.selectpicker').selectpicker('refresh');
        // 查询界面
        /*$("#materialsTypeId").append(opts);
        $("#materialsTypeId").selectpicker("refresh");*/
    }
})

//删除
function deleteFile(){
    $("#materialsTypeId").val(-1);
    $("#materialsName").val("");
    $("#materialsId").val("");
    $("#materialsCount").val(0);
}

function updatePictureMaterials(){
    $.ajax({
        url:"updatePictureMaterials",
        data:$("#myForm").serialize(),//获取表单的值
        success:function(){
            alert("成功")
            //$("#myTable").bootstrapTable('refresh');//表格刷新
        }
    });
}
//验证数量是否为正整数
function yz_count(){
    var materialsCount = $("#materialsCount").val()
    var span = $("#span_count")
    var reg = /^[1-9]\d*$/
    if (reg.test(materialsCount)){
        span.text("")
        return true
    }else{
        span.text("*请输入正整数")
        return false
    }
}


</script>
</html>